<template>
<div style="padding: 10px">
   <div style="margin-bottom:10px;display:flex;justify-content: space-between;">
    <div class="top-left">
      <span> 年份：</span>
      <a-dropdown :trigger="['click']">
        <template #overlay>
          <a-menu @click="changeYear">
            <a-menu-item  v-for="(item,i) in years" :key="i">
              {{item}}
            </a-menu-item>
          </a-menu>
        </template>
        <a-button>
          {{year}}
          <DownOutlined />
        </a-button>
      </a-dropdown>
      <span> 部门：</span>
      <a-dropdown  :trigger="['click']">
        <template #overlay>
          <a-menu @click="changeBuMen">
            <a-menu-item  v-for="(item,i) in bumenList" :key="i">
              {{item.deptName}}
            </a-menu-item>
          </a-menu>
        </template>
        <a-button class="mytbn">
          {{bumenName}}
          <DownOutlined />
        </a-button>
      </a-dropdown>
      <span style="margin-left:10px;">请假日期：</span>
      <a-date-picker @change="dateChange" placeholder="" />
      <span style="margin-left:10px;">请假人员：</span>
      <a-input placeholder="输入人员姓名"  v-model:value="personName"  allowClear style="width:120px;margin-right:10px"/>
      <a-button type="primary" @click="search">搜索</a-button>
    </div>
    <div class="top-right">
      <a-button type="primary" @click="export1">导出</a-button>
    </div>
  </div>
  
  <a-table
      :columns="columns"
      :data-source="data"
      bordered
      size="middle"
      :rowKey="
        (record, index) => {
          return index;
        }
      "
      :pagination="true"
      class="mytable"
      :rowClassName="setRowClassName"
      :loading="tbLoading"
    />
</div>
 
</template>
<script>
import { request } from "../../utils/request";
import { DownOutlined } from '@ant-design/icons-vue';
const years = ['2022','2023','2024','2025','2026','2027','2028','2029','2030'];
const bumenList = [{deptId:'',deptName:'所有部门'},{deptId:'137',deptName:'山东分公司'},{deptId:'138',deptName:'华东分公司'}];
const bumenName = '所有部门';
const bumenId = '';
const year = '2023';
const dateString = '';
const personName = '';
const tbLoading = true;
const columns = [
  {
    title: '序号',
    dataIndex: 'number',
    key: 'number',
    // width:100
  },
  {
    title: '姓名',
    dataIndex: 'personname',
    key: 'personname',
    // width:200
  },
  //  {
  //   title: '部门',
  //   dataIndex: 'deptname',
  //   key: 'deptname',
  //   width:200
  // },
  // {
  //   title: '岗位',
  //   dataIndex: 'gwMc',
  //   key: 'gwMc',
  //   width:200
  // },
  {
    title: '入职日期',
    dataIndex: 'rzsj',
    key: 'rzsj',
    // width:200
  },
  {
    title: '累计工龄（年）',
    key: 'ljgl',
    dataIndex: 'ljgl',
    // width:200
  },
  {
    title: '可请年假数（天）',
    key: 'kxnjs',
    dataIndex: 'kxnjs',
    // width:200
  },
   {
    title: '休假日期',
    key: 'tongjiDate',
    dataIndex: 'tongjiDate'
  },
];
const data = [];
export default {
 data() {
    return {
      columns,
      data,
      bumenList, //部门列表
      bumenName, //部门名称
      bumenId, //部门id
      year, //选择年 2022
      years, //年列表 2022 2023
      dateString,//休息日
      personName, //人员
      tbLoading,
    };
  },
  mounted(){
     this.init();
  },
  methods:{
    init(){
      this.getAllBumen();
      this.nianxiujia();
    },
    getAllBumen(){// 获取所有部门
      request({ 
          url: "/api/deptTree",
          method: "get",
        }).then((res)=>{
          this.bumenList = res[0].sunDept[1].sunDept  
          this.bumenList.unshift({deptId:'',deptName:'所有部门'});
      })
    },
    nianxiujia(){//获取年休假数据
      this.tbLoading = true;
      request({ 
          url: `/api/nianxiujia?year=${this.year}&deptId=${this.bumenId}&person=${this.personName}&date=${this.dateString}`,
          method: "get",
        }).then((res)=>{
          res.forEach((element,i) => {
            let obj = {
               number: i+1
            }
            
           Object.assign(element, obj);
          });
          this.data = res;
          this.tbLoading = false
        })
    },
    changeYear(e) {
      this.year = this.years[e.key]
    },
    changeBuMen(e) {
      this.bumenName = this.bumenList[e.key].deptName;
      this.bumenId = this.bumenList[e.key].deptId;
    
     
    },
    dateChange(date,dateString) {
      this.dateString = dateString;
     
    },
    search(){
      this.nianxiujia();
    },
    export1(){
      request({
          url: `/api/nianxiujiaexport?year=${this.year}&deptId=${this.bumenId}&person=${this.personName}&date=${this.dateString}`,
          method: "get",
        }).then((res) => {
          window.location.href = `api` + res;
        });
    }
  },
  components: {
    DownOutlined,
  },
};
</script>
<style scoped>
 :deep(.ant-dropdown-button) {
  margin-right: 8px;
  margin-bottom: 8px;
}
.ant-dropdown-menu {
   height: 150px;
   overflow: auto;
}
</style>